<template>
  <view :class="theme">
    <view v-for="(section, sectionIndex) in sections" :key="sectionIndex" class="mt-20 bg-2">
      <view v-for="(option, optionIndex) in section" :key="option.key" @click="todo(option)"
        :hover-class="option.hideMore ? `none` : `tap-hover`" :style="{
          margin: `0 30rpx`,
          padding: `36rpx 0`,
          borderTopColor: `#f0f0f0`,
          borderTopStyle: `solid`,
          borderTopWidth: optionIndex ? `2rpx` : 0
        }" class="fd-row ai-center">
        <text class="f1 ml-30 mr-30 fs-28">{{ option.title }}</text>
        <text v-if="option.description" class="color-9 fs-28 mr-12">{{ option.description }}</text>
        <u-icon v-if="!option.hideMore" size="28" name="arrow-right" color="#999" />
      </view>
    </view>

    <button v-if="userInfo[$config.FIELD_TOKEN]" @click="logout" hover-class="tap-hover"
      class="ai-center jc-center bg-6 lh-3 color-2 fs-28 fw-700 br-20" style="margin: 88rpx 30rpx;">
      退出登录
    </button>
  </view>
</template>

<script lang="ts" setup>
import { checkVersion } from "@/common/libs/dependency";
import { useMapState } from "@/common/libs/store";
import { getClient, transformURL } from "@/common/libs/utils";
import { onLoad } from "@dcloudio/uni-app";
import { reactive } from "vue";

const { theme } = useMapState(["theme"]);
const { $config = {} } = getApp().globalData || {};

const systemInfo = uni.getSystemInfoSync();

const buildDocumentURL = (title: string, api: string) => transformURL("/pages/common/webview",
  {
    title,
    url: encodeURIComponent(transformURL("/document.html",
      { title },
      $config.URL_REMOTE + $config.API_PREFIX + api
    ))
  }
);

const sections: Array<{
  key: string;
  title: string;
  description?: string;
  hideMore?: boolean;
}[]> = [
    [
      { key: "userAgreement", title: "用户协议" },
      { key: "privacyPolicy", title: "隐私政策" },
      // #ifndef MP
      // { key: "signOut", title: "注销账号" },
      // #endif
    ],
    [
      {
        key: "download", title: "分享APP"
      },
      {
        key: "versionUpdate",
        title: "版本更新",
        hideMore: [1, 2, 3, 4].includes(getClient()),
        description: `Version ${systemInfo.appWgtVersion || systemInfo.appVersion}`
      },
    ]
  ];

const userInfo = reactive<any>({});

onLoad(() => {
  uni.getStorage({
    key: $config.STORAGE_KEY_USER_INFO,
    success(data) {
      Object.assign(userInfo, data);
    }
  });
});

const logout = async () => {
  uni.removeStorage({ key: $config.STORAGE_KEY_USER_INFO });
  uni.reLaunch({ url: $config.PAGE_LOGIN_ACCOUNT });
}

const todo = (option: typeof sections[number][number]) => {
  if (option.hideMore) return;
  switch (option.key) {
    case "signOut":
      break;
    case "download":
      uni.navigateTo({ url: "/pages/common/download" });
      break;
    case "versionUpdate":
      [5, 6].includes(getClient()) && checkVersion({ showToast: true });
      break;
    default:
      const map = {
        privacyPolicy: {
          api: "/privateInfo",
          title: "隐私政策"
        },
        userAgreement: {
          api: "/userAgreementInfo",
          title: "服务协议"
        },
      }, { api, title } = map[option.key as keyof typeof map];
      uni.navigateTo({ url: buildDocumentURL(title, api) });
      break;
  }
}

</script>

<style lang="scss" scoped>
// scss
</style>